<template>
	<view class="page">
		<view class="title-pad">
			用户登录
		</view>
		<view class="f-st">
			<u-form>
				<u-form-item>
					<u-input prefixIcon="account" v-model="phoneNumber" prefixIconStyle="font-size: 22px;color: #909399" border="bottom"
						placeholder="请输入账号" maxlength="12" type="number"></u-input>

				</u-form-item>
				<u-form-item>

					<u-input :password="true" v-model="password" prefixIcon="lock" prefixIconStyle="font-size: 22px;color: #909399"
						border="bottom" placeholder="请输入密码" maxlength="12" type="password"></u-input>

				</u-form-item>
				<u-form-item>


					<u-input prefixIcon="lock" v-model="captcha" prefixIconStyle="font-size: 22px;color: #909399" border="bottom"
						placeholder="请输入验证码" maxlength="12" type="text">
						<template slot="suffix">
							<image style="width: 3rem;height: 1.6rem;" :src="captchaSrc" alt="验证码,看不清楚?请点击刷新验证码"
								border="1" id="c_yzm_zh" class="click" @click="refreshCaptcha"></image>
						</template></u-input>


				</u-form-item>
			</u-form>
			<view class="flex-container j-sbe">
				<text @click="goresign">注册</text>
				<text @click="goupasswor">忘记密码</text>
			</view>
			<u-button color="#ff5a08" @tap="loginUser" style="margin-top: 1rem;" text="登录"></u-button>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				captchaSrc: "",
				phoneNumber: "",
				password: "",
				captcha: "",
			}
		},
		created() {
			this.getcapth()
		},
		methods: {
			async getcapth() {

				const res = await this.$request.get('/system/user/captcha', {})
				console.log(res);
				if (res.code == 200) {

					this.captchaSrc = 'data:image/jpeg;base64,' + res.data.captchaImage;
				}

			},
			refreshCaptcha() {
				this.getcapth()
			},
			async loginUser() {
				if (!this.phoneNumber || !this.password || !this.captcha) {
					this.$refs.uToast.show({
						type: 'warning',
						title: '警告',
						message: '请填写完整的登录信息',
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/warning.png'
					});
					return;
				}
				const data = {
					user_phone: this.phoneNumber,
					user_password: this.password,
					captcha: this.captcha // 将用户输入的验证码一起发送
				}
				try {
					const response = await this.$request.post("/system/user/login", data)
					if (response.success) {
						// 登录成功，处理响应数据
						const {token,user: { uid }}=response.data.user
						console.log(token,uid);
						// 在登录成功后
						this.$store.dispatch('login', {uid,token});
					
						this.$refs.uToast.show({
							type: 'success',
							title: '成功主题(带图标)',
							message: response.message,
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'

						})
						uni.switchTab({
							url: '/pages/tabBar/my/index'
						});


						// 这里可以处理登录成功后的逻辑，例如保存用户数据和 token
					} else {
						// 登录失败，处理错误信息
						console.log('登录失败:', response.message);
						this.$refs.uToast.show({
							type: 'error',
							icon: false,
							title: '失败主题',
							message: response.message,
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'

						})
						// 这里可以处理登录失败后的逻辑 
					}
				} catch (e) {
					console.log('登录请求失败:', e);
				}
			},
			goresign(){
				uni.navigateTo({
					url:"/pages/resign/resign"
				})
			},
			goupasswor(){
				uni.navigateTo({
					url:"/pages/tabBar/my/setting/password/password"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 100%;
		height: 100vh;
		background: #ffffff !important;
	}

	.f-st {
		width: 70vw;
		height: auto;
		padding: 10rpx;
		// border-radius: 0.3rem;
		margin: 0 auto;
		background-color: #ffffff;
		
		opacity: 0.8;
		
	}

	/deep/.u-border-bottom {
		border: 0.5px solid #f3b10a;
	}

	// .inputmap {
	// 	border: 0.5px solid #f3b10a;
	// }

	.title-pad {
		text-align: center;
		width: 100%;
		padding-top: 1rem;
	}
</style>